<template>
    <div class="pad">
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            ImaText="支付凭证"
            @checkRegions="checkRegions"
            @operation="operation"
            height="89vh"
            v-loading="loading"
        />
        <!-- table end -->

        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowRegions"
            center
            title="区域"
            width="40%"
            v-el-drag-dialog
        >
            <el-table
                    :data="regionsData"
                    border
                    height="300px"
                    v-loading="regionsLoading"
            >
                <el-table-column
                        label='省'
                        align="center"
                        prop="name"
                ></el-table-column>
                <el-table-column
                        label='市'
                        align="center"
                        prop="name"
                >
                    <template slot-scope="scope">
                        {{scope.row['children'][0]['name']}}
                    </template>
                </el-table-column>
                <el-table-column
                        label='区'
                        align="center"
                        prop="name"
                >
                    <template slot-scope="scope">
                        {{scope.row['children'][0]['children'][0]['name']}}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :visible.sync="isShowDetail"
            center
            title="物料配给详情"
            v-el-drag-dialog
            @close="obj.gid = '', radio  = ''"
        >
            <div
                    class="detail"
                    v-loading="operationLoading"
            >
                <div class="left">
                    <el-form label-width="100px" label-position="left">
                        <el-form-item label="运营商利润">
                            <el-input  v-model="obj.profit">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="推荐人">
                            <el-input disabled :value="operationData.share_name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="设置供应商">
                            <el-select v-model="obj.gid">
                                <el-option
                                    v-for="item in supplierList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="送货延迟罚款">
                            <el-input  v-model="obj.delay_fine"></el-input>
                        </el-form-item>
                        <el-form-item label="维修厂工时费">
                            <el-input  v-model="obj.shop_hours">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <el-form label-position="left" label-width="200px">
                        <el-form-item v-for="(item, index) in obj.mate" :label="item.materiel + ' /件'" :key="index">
                            <el-input v-model="item.num"></el-input>
                        </el-form-item>
                        <el-form-item label="是否供应滤芯">
                            <el-radio v-model="radio" label="1" border>是</el-radio>
                            <el-radio v-model="radio" label="2" border>否</el-radio>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="operation">
                <el-button type="primary" @click="through">通过</el-button>
                <el-button type="warning" @click="configRejectDialog = true">驳回</el-button>
            </div>
            <el-dialog
                :visible.sync="configRejectDialog"
                title="驳回理由"
                center
                append-to-body
                v-el-drag-dialog
                width="30%"
                @close="$refs['checkForm'].resetFields()"
            >
                <el-form :model="rejectText" ref="checkForm">
                    <el-form-item
                            label="驳回理由"
                            :rules="[
                                {required: true,message: '请输入驳回理由', trigger: 'blur'}
                            ]"
                            prop="text"
                    >
                        <el-input v-model="rejectText.text" style="width:55%;margin-right:5%;"></el-input>
                        <el-button @click="reject" type="danger">驳回</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "application",
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '运营商名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '支付凭证',
                        image: true,
                        prop: 'usecost'
                    },
                    {
                        label: '区域',
                        detail: true,
                        prop: 'regions',
                        methodName: 'checkRegions'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '操作',
                        detail: true,
                        btnText: '查看',
                        methodName: 'operation'
                    }
                ],
                isShowDetail: false,
                isShowRegions: false,
                regionsData: [],
                loading: false,
                regionsLoading: false,
                aid: '',
                operationData: {},
                supplierList:[],
                obj: {
                    aid: '',
                    id: '',
                    gid: '',
                    delay_fine: '',
                    profit: '',
                    shop_hours: '',
                    share_promo_code: '',
                    regions: '',
                    price: '',
                    mate: []
                },
                operationLoading: false,
                configRejectDialog: false,
                rejectText: {
                    text: ''
                },
                radio: '2'
            }
        },
        components: {
            tableDataEl
        },
        methods: {
            async init (search = '') { //初始化
                this.loading = true;
                let paramsStr = Object.assign(search, {page: this.page, pageSize: this.pageSize});
                let res = await this.api.regWaitAuditList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async checkRegions (...value) {  //查看区域
                this.regionsLoading = true;
                this.isShowRegions = true;
                let res = await this.api.detailArea({id: value[1]['id']});
                res.code ? this.regionsData = res.data : this.$message(res.msg)
                this.regionsLoading = false;
            },
            async operation (...value) {  //操作
                this.operationLoading = true;
                this.isShowDetail = true;
                /**/
                let temp = value[1];
                this.obj.aid = temp['aid'];
                this.obj.id = temp['id'];
                this.obj.regions = temp['regions'];
                this.obj.share_promo_code = temp['share_promo_code'];
                /*以上赋值通过需用到的*/
                /*详情*/
                let res = await this.api.applicationDetail({id: value[1]['id'], aid: value[1]['aid']});
                this.obj.delay_fine = res.data.delay_fine;
                this.obj.profit = res.data.profit;
                this.obj.shop_hours = res.data.shop_hours;
                this.obj.price = res.data.price;
                this.obj.share_promo_code = res.data.share_promo_code;
                /*供应商列表*/
                let res1 = await this.api.selectAgent({aid: this.aid});
                /*获取油品信息*/
                let res2 = await this.api.commonOil();
                if(res.code && res1.code && res2.code) {
                    this.operationData = res.data;
                    this.supplierList = res1.data;
                    this.obj.mate = res2.data;
                    this.operationLoading = false
                } else {
                    this.$message({
                        type: 'error',
                        message: '请求数据出错！'
                    })
                }
            },
            async through () { //通过操作
                if(this.radio === '') {
                    this.$message('请选择是否供应滤芯！');
                    return false;
                }
                let res = await this.api.adoptAudit(Object.assign(this.obj,{core_type: this.radio}));
                this.$message({
                    type: res.code ? 'success' : 'error',
                    message: res.msg
                });
                this.init();
                this.isShowDetail = false;
            },
            async reject () {
                let flag = true;
                this.$refs['checkForm'].validate((valid) => {
                   !valid ? flag = false : flag
                });
                if(flag) {
                    let res = await this.api.rejectAudit({id: this.obj.id,aid: this.obj.aid,reason: this.rejectText['text']});
                    this.$message({
                        type: res.code ? 'success' : 'error',
                        message: res.msg
                    });
                    this.init();
                    this.configRejectDialog = false;
                    this.isShowDetail = false;
                }

            }
        },
        mounted () {
            this.init()
        },
        watch: {
            page () {
                this.init()
            },
            pageSize () {
                this.init()
            }
        }
    }
</script>

<style scoped>
 .pad {
     padding: 10px;
 }
    .detail {
        height:320px;
        border:solid 1px #efefef;
        border-radius:5px;
        padding:10px;
        box-sizing:border-box;
    }
    .detail .left {
        width:42%;
        float:left;
        padding-left:2%;
    }
    .detail .right {
        width:55%;
        float:left;
        padding-left:5%;
        box-sizing:border-box;
        height:inherit;
    }
    .operation {
        /*display:flex;*/
        /*justify-content: space-around;*/
        text-align:center;
    }
    .el-select {width: 100%;}
</style>
